<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>钢铁侠</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		#box{
			margin: 100px auto;
			width: 300px;
			height: 500px;
				
			transform-style:preserve-3d ;
			position: relative;
			transform: rotateX(0deg);
			transform: rotateY(0deg);
		}
		#box #front{
			
			width: 300px;
			height: 500px;
			position: absolute;
			transform: rotatey(90deg) translateZ(150px);
		}
		#box #right{
			
			width: 300px;
			height: 500px;
			position: absolute;
			transform: translateZ(150px);
		}
		body{
		perspective: 1000px;
		}
		img{
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<div id="box">
		<div id="front">
			<img src="img/poster2.png"/>
		</div>
		<div id="right">
			<img src="img/poster1.png"/>
		</div>
	</div>
	<script type="text/javascript">
		var dj = document.getElementById("box");
		dj.onmousemove = function(){
			dj.style.transform = "rotateY("+292+"deg)";
		}
		dj.onmouseout = function(){
			dj.style.transform = "rotateY("+0+"deg)";
		}
		//Nihaoya
	</script>

</body>
</html>